<template>
	<view class="content">
		<u-no-network></u-no-network>

		<view class="info shadow">
			<view class="info2">
				<text>标题</text>
				<input type="text" v-model="title" value="" placeholder="请输入标题 " class="inputStyle" />
			</view>
			<view class="info1" @click="opnAddr">
				<text>地址</text>
				<input type="text" v-model="site" value="" disabled placeholder="请选择地址" class="inputStyle" />
			</view>
			<u-picker v-model="show" mode="time" :params="params" @confirm="confirm"></u-picker>
			<view class="info2" @click="openPiker(1)">
				<text>开始时间</text>
				<input type="digit" v-model="start_time" disabled value="" placeholder="请输入开始时间" class="inputStyle" />
			</view>
			<u-picker v-model="show1" mode="time" :params="params" @confirm="confirm2"></u-picker>
			<view class="info2" @click="openPiker(2)">
				<text>结束时间</text>
				<input type="digit" v-model="over_time" disabled value="" placeholder="请输入结束时间 " class="inputStyle" />
			</view>
			<u-picker v-model="show2" mode="selector" :range="selectorObj" range-key="name" @confirm="confirmSelection"></u-picker>
			<view class="info2" @click="openPiker(3)">
				<text>分类</text>
				<input type="text" disabled v-model="classify" value="" placeholder="请输入分类 " class="inputStyle" />
			</view>

			<view class="info2">
				<text>预算</text>
				<input type="digit" v-model="budget" value="" placeholder="请输入预算 " class="inputStyle" />
			</view>
			<view class="info2">
				<text>手机</text>
				<input type="number" v-model="phone" value="" placeholder="请填写手机号或者微信号 " class="inputStyle" />
			</view>
			<view class="info2">
				<text>类型</text>
				<u-radio-group v-model="value">
					<u-radio
						active-color="#FF1A14"
						@change="radioChange"
						v-for="(item, index) in list"
						:key="index"
						:name="item.name"
						:disabled="item.disabled"
					>
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="shop shadow">
			<text>详情需求</text>
			<textarea value="" v-model="details" placeholder="请填写详情需求" class="texta padding margin-top margin-bottom" />
		</view>
		<u-radio-group v-model="value1" circle   class='u-radio__labelll' >
			<u-radio v-for="(item, index) in list1" active-color="#FF1A14"  class='u-radio__labelll'  :key="index" :name="item.name" shape="square" :disabled="item.disabled">
				{{ item.name }}
			</u-radio>
		</u-radio-group>
		<!--  animation-scale-up-->
		<view class="applyToSettleIn"><button type="default" :loading="isLoading" @click="addCse">添加案例</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLoading: false,
			show: false,
			show1: false,
			show2: false,
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false,
			},
			list: [
				{
					name: '租赁订单',
					disabled: false,
				},
				{
					name: '工程订单',
					disabled: false,
				},
			],
			list1: [
				{
					name: '我保证以上内容所填信息是真实的，如有虚假将接受平台惩罚',
					disabled: false,
				},
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '租赁订单',
			value1: '我保证以上内容所填信息是真实的，如有虚假将接受平台惩罚',
			selectorObj: [],

			fid: '',
			title: '',
			site: '',
			start_time: '',
			over_time: '',
			classify: '',
			budget: '',
			phone: '',
			details: '',
			type: 1,
		};
	},

	onLoad(e) {
		this.getClassification();
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ff0000',
			animation: {
				duration: 400,
				timingFunc: 'easeIn',
			},
		});
	},
	methods: {
		confirmSelection(e) {
			this.classify = this.selectorObj[e[0]].name;
			this.fid = this.selectorObj[e[0]].id;
		},
		/* 获取分类 */
		async getClassification() {
			let obj = {
				uid: uni.getStorageSync('uid'),
			};
			const res = await this.$u.post('api/shop/goods_type', obj, {});

			this.selectorObj = res.data;
			console.log('res >>  ', res);
		},
		radioChange(e) {
			if (e == '工程订单') {
				this.type = 2;
			}
			if (e == '租赁订单') {
				this.type = 1;
			}
		},

		radioGroupChange(e) {},
		async opnAddr() {
			const [, { name, address, longitude, latitude }] = await uni.chooseLocation();
			this.site = address;
		},
		confirm(e) {
			this.start_time = `${e.year}-${e.month}-${e.day} ${e.hour}-${e.minute}`;
		},
		confirm2(e) {
			this.over_time = `${e.year}-${e.month}-${e.day} ${e.hour}-${e.minute}`;
		},
		openPiker(i) {
			if (i == 1) {
				this.show = true;
			}
			if (i == 2) {
				this.show1 = true;
			}
			if (i == 3) {
				this.show2 = true;
			}
		},
		success(index, list) {
			this.cover = index.url;
		},
		/* 发布需求 */
		async addCse() {
			this.isLoading = true;
			var _this = this;
			setTimeout(function() {
				_this.isLoading = false;
			}, 1000);
			if (!this.title) return uni.$showMsg('请输入标题 !');
			if (!this.site) return uni.$showMsg('请选择地址 !');
			if (!this.start_time) return uni.$showMsg('请输入开始时间 !');
			if (!this.over_time) return uni.$showMsg('请输入结束时间 !');
			if (!this.classify) return uni.$showMsg('请输入分类 !');
			if (!this.budget) return uni.$showMsg('请输入预算 !');
			if (!this.phone) return uni.$showMsg('请填写手机号或者微信号 !');
			if (!this.details) return uni.$showMsg('请填写详情需求 !');

			uni.$showLoading();
			let obj = {
				uid: uni.getStorageSync('uid'),
				title: this.title,
				site: this.site,
				start_time: this.start_time,
				over_time: this.over_time,
				classify: this.classify,
				budget: this.budget,
				phone: this.phone,
				details: this.details,
				type: this.type,
			};

			const res = await this.$u.post('api/shop/post_demand', obj, {});
			if (!res.code) return uni.$showMsg(res.msg);

			uni.$showMsg(res.msg);
			setTimeout(() => {
				uni.navigateBack({
					delta: 1,
				});
			}, 300);
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	padding: 30rpx;
	input {
		padding-left: 20rpx;
	}
	/deep/ .u-radio__labelll {
		.u-radio {
			.u-radio__label {
				margin-top: 30rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}
		
		
	}
	.shop {
		width: 690rpx;
		// height: 282rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 31rpx;
		margin-top: 20rpx;
		.texta {
			width: 100%;
			border: 1rpx dashed #e8e8e8;
			border-radius: 10rpx;
		}
		text {
			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		text:before {
			content: '*';
			color: #ff0000;
		}
	}

	.info {
		width: 690rpx;
		// height: 450rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(51, 51, 51, 0.1);
		border-radius: 20rpx;
		padding: 20rpx 31rpx;
		.verificationCd {
			position: relative;
			.countdown {
				position: absolute;

				right: 50rpx;

				width: 110rpx;
				height: 60rpx;
				border-radius: 35rpx;
				//background-color: #007aff;
			}
		}

		.info1,
		.info2,
		.info3,
		.info4,
		.info5 {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 120rpx;

			border-bottom: 2rpx solid #f1eded;

			text {
				font-size: 36rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			text:before {
				content: '*';
				color: #ff0000;
			}

			.inputStyle {
				font-size: 30rpx;
				font-family: 'Microsoft YaHei', PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}

	.applyToSettleIn {
		button {
			margin-top: 99rpx;
			width: 690rpx;
			height: 100rpx;
			background: #ff1a14;
			border-radius: 50rpx;

			font-size: 36rpx;
			font-family: 'Microsoft YaHei', PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
}
</style>
